<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>用户管理-主页</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{/layuimini/lib/layui-v2.6.3/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/layuimini/css/public.css}" media="all">
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <fieldset class="table-search-fieldset">
            <legend>搜索条件(<b style="color: #1E9FFF;cursor: pointer">收起--展开</b>)</legend>
            <form class="layui-form layui-form-pane" lay-filter="search-form" id="search-form" action="">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">用户名</label>
                        <div class="layui-input-inline">
                            <input type="text" name="userName" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">用户姓名</label>
                        <div class="layui-input-inline">
                            <input type="text" name="nickName" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">用户状态</label>
                        <div class="layui-input-inline">
                            <select name="userStatus">
                                <option value="">请选择</option>
                                <option value="0" selected>启用</option>
                                <option value="1">禁用</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button type="submit" class="layui-btn layui-bg-blue"  lay-submit lay-filter="search-btn"><i class="layui-icon layui-icon-search"></i> 搜 索</button>
                        <button type="reset" class="layui-btn layui-btn-primary"  lay-submit lay-filter="reset-btn"><i class="layui-icon layui-icon-refresh"></i> 重 置</button>
                    </div>
                </div>
            </form>
        </fieldset>
        <!-- 表格头部左侧工具栏 -->
        <script type="text/html" id="toolbar">
            <div class="layui-btn-group layui-btn-container">
                <button class="layui-btn layui-btn-normal layui-btn-sm" lay-event="add"><i class="layui-icon layui-icon-add-1"></i>新增</button>
                <button class="layui-btn layui-btn-normal layui-btn-sm" lay-event="delete"><i class="layui-icon layui-icon-delete"></i>删除</button>
            </div>
        </script>
        <!-- 数据表格 -->
        <table class="layui-hide" id="userList" lay-filter="userListFilter"></table>
        <!-- 表格行操作列 -->
        <script type="text/html" id="rowsBar">
            <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="edit"><i class="layui-icon  layui-icon-edit"></i>编辑</a>
            <a class="layui-btn layui-btn-xs " lay-event="role"><i class="layui-icon layui-icon-auz"></i>角色</a>
            <a class="layui-btn layui-btn-xs layui-btn-danger " lay-event="delete"><i class="layui-icon layui-icon-delete"></i>删除</a>
        </script>
    </div>
</div>
<script th:src="@{/layuimini/lib/layui-v2.6.3/layui.js}" charset="utf-8"></script>
<script th:src="@{/layuimini/js/lay-config.js?v=1.0.4}" charset="utf-8"></script>
<script th:src="@{/layuimini/lib/jquery-3.4.1/jquery-3.4.1.min.js}" charset="utf-8"></script>
<script th:src="@{/js/table-form.js}" charset="utf-8"></script>
<script type="text/javascript" th:inline="javascript">
    layui.use(['form', 'jquery','table','notice'], function () {
        let $ = layui.jquery,
            form = layui.form,
            notice = layui.notice,
            table = layui.table;

        let ctxPath = /*[[@{/}]]*/'';

        //渲染表格
        let tableIns = table.render({
            elem: '#userList',
            url: ctxPath+'system/sysUser/userList',
            title:'用户信息',
            height: 'full-100',
            method : 'GET',
            toolbar: '#toolbar',                                //绑定表格头部左侧工具栏
            defaultToolbar: ['filter', 'exports', 'print', {    //开启默认表格头部右侧图标
                title: '提示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips'
            }],
            cols: [
                [
                    {type: 'checkbox', width: 30,align:'center'},
                    {field: 'username', width: 90, title: '用户名',align:'center',sort:true},
                    {field: 'nickName', width: 110, title: '用户姓名',align:'center',sort:true},
                    {field: 'py', width: 80, title: '拼音码',align:'center',hide:true},
                    {field: 'wb', width: 80, title: '五笔码',align:'center',hide:true},
                    {field: 'userAvatar', width: 140, title: '用户头像',align:'center'},
                    {field: 'userStatus', width: 100, title: '用户状态',align:'center',sort:true, templet:function(d){
                        return (0 === d.userStatus) ? '启用' : '作废'
                    }},
                    {field: 'userPhone', width: 120, title: '联系电话',align:'center'},
                    {field: 'userEmail', width: 200, title: '电子邮箱',align:'center'},
                    {field: 'userAddr', width: 280, title: '联系地址',align:'center',sort:true},
                    {field: 'deptId', width: 140, title: '所在科室',align:'center',sort:true},
                    {field: 'loginTime', width: 200, title: '最近登陆时间',align:'center',sort:true},
                    {field: 'loginIp', width: 140, title: '最近登陆ip',align:'center'},
                    {title: '操作', minWidth: 220, toolbar: '#rowsBar', align: 'center',fixed: 'right'}
                ]
            ],
            page: true,
            limits: [10, 15, 20, 25, 50, 100],
            limit: 15
        });

        //监听查询条件提交按钮
        form.on('submit(search-btn)', function (data) {
            //执行搜索重载
            table.reload('userList', {
                page: {curr: 1},
                where: form.val('search-form')
            }, 'data');
            return false;
        });

        //监听表格头部工具栏事件
        table.on('toolbar(userListFilter)', function (obj) {
            switch (obj.event) {
                case 'add':
                    openAddOrUpdateUserDialog();
                    break;
                case 'delete':
                    let checkStatus = table.checkStatus(obj.config.id);
                    let userIds = "";
                    $.each(checkStatus.data,function (k,v){
                        userIds = userIds + ","+v.userId;
                    })
                    dealUser(userIds);
                    break;
            };
        });

        //监听表格行操作列事件
        table.on('tool(userListFilter)', function (obj) {
            switch (obj.event) {
                case 'edit':
                    openAddOrUpdateUserDialog(obj.data.userId);
                    break;
                case 'delete':
                    dealUser(obj.data.userId);
                    break;
                case 'role':
                    editUserRole(obj.data.userId);
                    break;
            };
        });

        //打开添加或修改用户页面
        function openAddOrUpdateUserDialog(userId) {
            let url = ctxPath+'system/sysUser/userAddOrUpdate';
            let title = '<i class="layui-icon layui-icon-user">更新系统用户</i>';
            if(userId){
                url = url+"?userId="+userId;
                title = '<i class="layui-icon layui-icon-user">更新系统用户</i>';
            }
            layer.open({
                title: title,
                type: 2,
                shade: 0.2,
                shadeClose: true,
                offset:'r',
                area: ['35%', '100%'],
                content: url
            });
        }

        //批量删除用户
        function dealUser(datas) {
            if(datas.length === 0){
                notice.warning('请选择需要删除的记录！');
                return;
            }
            layer.confirm('您确定要删除选中的记录吗？',{title:'提示',icon:0,btn:['确定','取消']},function (index) {
                layer.close(index);
                $.ajax({
                    type:'DELETE',
                    url:ctxPath+'system/sysUser/deleteUser/'+datas,
                    dataType:'json',
                    success:function (res){
                        if(res.code === 200){
                            notice.success('删除成功',function(){
                                tableIns.reload();
                            });
                        }else{
                            notice.error(res.msg);
                        }
                    }
                });
            })
        }

        //编辑用户角色
        function editUserRole(userId) {
            layer.open({
                title: '<i class="layui-icon layui-icon-auz">更新用户角色</i>',
                type: 2,
                shade: 0.2,
                autoRow: true,
                shadeClose: true,
                area: ['35%', '40%'],
                content: ctxPath+'system/sysUser/userRoleAddOrUpdate?userId='+userId
            });
        }
    });
</script>
</body>
</html>